<style>
@-webkit-keyframes rotate {
    0%  { transform: rotate(0deg); }
    50%  { transform: rotate(180deg); }
    100%  { transform: rotate(360deg); }
}

@keyframes rotate-individual {
    0%  { rotate: 0deg; }
    50%  { rotate: 180deg; }
    100%  { rotate: 360deg; }
}
div {
    /* to avoid empty layers */
    min-width: 100px;
    min-height: 20px;
    background: blue;
}
</style>
<script type="application/x-javascript">
  if (window.internals)
    document.addEventListener('animationstart', () => internals.pauseAnimations(0));
</script>
<div id="transform3d" style="transform: translateZ(100px);"></div>
<div id="transform3d-individual" style="translate: 0px 0px 100px;">translated individual</div>
<div id="backface-visibility" style="backface-visibility: hidden">backface hidden</div>
<div id="animation" style="width: 50px; height: 50px; -webkit-animation-name: rotate; -webkit-animation-iteration-count: infinite; -webkit-animation-duration: 5s;">animated</div>
<div id="animation-individual" style="width: 50px; height: 50px; animation-name: rotate-individual; animation-iteration-count: infinite; animation-duration: 5s;">animated individual</div>
<div id="transformWithCompositedDescendants" style="transform: rotate(10deg)">
    <div style="transform: scale3d(2, 3, 4);">
    </div>
</div>
<div id="transformWithCompositedDescendants-individual" style="rotate: 10deg">
    <div style="scale: 2 3 4;">
    </div>
</div>
<div id="opacityWithCompositedDescendants" style="opacity: 0.5">
    <div style="transform: translateZ(100px);">opacity
    </div>
</div>
<div id="reflectionWithCompositedDescendants" style="-webkit-box-reflect: below">
    <div style="transform: translateZ(100px);">reflected
    </div>
</div>
<div id="perspective" style="-webkit-perspective: 500;">
    <div style="transform: translateZ(100px);">perspective</div>
</div>
<div id="preserve3d" style="-webkit-transform-style: preserve-3d;">
    <div style="transform: translateZ(100px);">preserve3d
    </div>
</div>

